<template>
  <div class="writing">

        <div class="v_retgo" @click="returngo"><i class="el-icon-arrow-left"></i>文章详情</div>
        <!--需求信息-->
        <div class="xm-item" v-if="proObj!=''">
          <div class="left">
            <p class="p tit"><span class="line"></span>{{proObj.name}}</p>
            <p class="p des">{{proObj.description}}</p>
            <p class="p info">
              <span>{{proObj.endTime | stampFormate2}} 截稿 • </span>
              <span>{{proObj.dicName }} • </span>
              <!-- <span v-if="proObj.status == 1">未发布</span> -->
              <span v-if="proObj.status==2 &&  (proObj.articleStatus == null || proObj.articleStatus == 0)">征稿中<i v-if="proObj.articleStatus == 0">(草稿)</i></span>
              <span v-if="proObj.status==3 &&  (proObj.articleStatus == null || proObj.articleStatus == 0)">已截稿</span>
              <span v-if="proObj.status==5 &&  (proObj.articleStatus == null || proObj.articleStatus == 0)">已截稿<i v-if="proObj.articleStatus == 0">(草稿)</i></span>
              <!-- <span v-if="proObj.status==5 &&  artstatus == 0">草稿</span> -->

              <!-- <span v-if="proObj.status==2 &&  proObj.articleStatus == 0">草稿</span> -->
              <!-- <span v-if="artstatus==1">审核中</span> -->
              <!-- <span v-if="artstatus==6 || artstatus==2 || artstatus == 7">写作中</span> -->
              <!-- <span v-if="proObj.articleStatus != null && artstatus==3">未采纳</span> -->
              <!-- <span v-if="artstatus==0">草稿</span> -->

              <span v-if="artstatus==1">审阅中</span>
              <span v-if="artstatus==6 || artstatus==7">待写作</span>
              <span v-if="artstatus==2">校稿中</span>
              <span v-if="artstatus==4">已定稿</span>
              <span v-if="artstatus==5">已过期</span>
              <span v-if="artstatus==3">未采纳</span>
          
            </p>
          <!--   <el-button v-if="proObj.status==2 && (proObj.articleStatus == 0 || proObj.articleStatus == null) && dialog.oprTyp==''" @click="tougao">投稿</el-button> -->
          </div>
        </div>
        <!--表单-->
         <div v-show="dialog.oprTyp == 1" >
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item label="文章标题" prop="title" size="mini">
            <el-input v-model="ruleForm.title" ></el-input>
          </el-form-item>
          <div class="z-pic fl">
                    <el-upload
                      class="avatar-uploader"
                      :action='imgurl'
                      :show-file-list="false"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                      <img v-if="imageUrl" :src="imageUrl" class="avatar">
                      <!-- <img class="v_iimg" src="http://oss.welltour.cn/welltour/static/spsy.png" /> -->

                    </el-upload>
                <div class="hig" v-if="authFrontPic!=''" @click="shuchu()"><i class="iconfont icon-closeicon"></i></div>
                  <p>点击上传封面图</p>
                    <div class="img" v-if="img1!=''"><img :src="img1" alt=""></div>
          </div>
          <el-form-item label="选择视频" prop="video_en" size="mini">
            <div class="v_boxbox">
              <div class="v-upload-btn" >
                <div v-if="progressBar_en == 0">
                <el-button size="mini" type="primary">点击上传</el-button>
                <input type="file" id="uploadVideo_en" accept="*" @change="uploadVideo_en" class="file">
                </div>
              </div>
             <p class="v-des" v-if="progressBar_en == 0">请上传mp4格式，且不超过500M</p>
             <!-- <p class="v-des">上传成功在文章详情页顶部展示</p> -->
             <video controls v-if="ruleForm.video_en!='' && ruleForm.video_en!=null" class="v_video">
               <source :src="ruleForm.video_en" type="video/mp4">
             </video>
             <div class="video-list">
               <p class="v-des" v-for="(item, key, index) in fileList_en">
                 <span>{{ item.name }}</span><!--<span style="margin-left:10px;color:#bbb;">{{item.size}}M</span>-->
                 <i class="el-icon-close" @click="delVideo_en" v-if="fileList_en.length > 0"></i>
                 <i class="el-icon-circle-check"  v-if="fileList_en.length > 0"></i>
               </p><!-- v-if="percent<1 && percent>0"-->
               <p class="barProg">
                 <img class="progress" :width="progressBar_en">
               </p>
             </div>
             </div>
         </el-form-item>
          <el-form-item label="文章内容" prop="content">
            <el-input type="textarea" v-model="ruleForm.content" name="editor"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="postArticle(2)" size="mini" v-if="proObj.status !=5 ||  artstatus != 0">提交</el-button>
             <el-button type="primary" disabled size="mini" v-if=" proObj.status==5 &&artstatus == 0">提交</el-button>
            <el-button type="primary" @click="postArticle(1)" size="mini" v-if="artstatus!=1&&artstatus!=2&&artstatus!=6&&(proObj.status !=5 || artstatus != 0 || artstatus != 1)">暂存</el-button>
            <el-button type="primary" size="mini" v-if="artstatus==1" @click="open()">撤回</el-button>
            <el-button @click="returnsuperior" size="mini">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="dialog.oprTyp == 2" v-show="articleDetail!=''">

        <!--文章详情-->
        <div class="reqCover">
          <div class="item">
            <div class="left">
              <p class="p tit">{{articleDetail.title}}</p>
              <p class="p info">
                <span>{{articleDetail.userName}} • </span><span>{{articleDetail.createTime | stampFormate2}} 发布</span>
              </p>
              <video controls v-if="articleDetail.video!='' && articleDetail.video!=null" class="v_video">
               <source :src="articleDetail.video" type="video/mp4">
             </video>
              <div class="p info">
                <div class="twoLine" v-html="articleDetail.content"></div>
                <!-- <a class="aLink">阅读全文</a> -->
              </div>
              <el-button size="mini" @click="returnsuperior">返回上一页</el-button>
            </div>
          </div>
        </div>
      </div>
      <span v-if="dialog.oprTyp == 3">删除后不可恢复，确定删除吗？</span>
      <span v-if="dialog.oprTyp == 3" slot="footer" class="dialog-footer">
            <el-button size="mini" @click="centerDialogVisible = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="handleOk">确 定</el-button>
          </span>
    <!-- </el-dialog> -->
  </div>
</template>
<script>
    import {commonService} from '../../service/commonService'
    import {common} from '../../assets/js/common/common'
    // import CKEDITOR from "../../../src/assets/js/common/ckeditor/ckeditor"
    // import '../../mixin/filter';
    // let myEditor;// 富文本编辑器
  export default {
    props: [],
    data () {
      return {
        // 操作区
        status: '', // 选择需求状态
        query: '', // 查询条件
        dicId: '', //行业状态
        options:[],
        // 列表
        tableData: [], //列表数据
        // 分页
        inde:1,
        pages:{
           no:1,
           size:10,
        },

        imgurl:'http://api.welltour.cn/files',
        imageUrl:'http://oss.welltour.cn/welltour/static/spsy.png',
        authFrontPic:'',
        img1:'',

        // 弹层
        fileList_en: [],
        // video_en: '', // 视频
        ossOption: { // oss上传视频
            region: 'oss-cn-shanghai',
            accessKeyId: '',
            accessKeySecret: '',
            stsToken: '',
            bucket: 'well-tour'
        },
        progressBar_en:0,
       proObj:'',          //x_需求
       articleDetail:'',  //x_详情
        dialog: {
          title: '',
          content: '',
          rows: '',
          index: '',
          id: '',
          oprTyp: '', //操作类型：1.删除；2.审核
        },
         // 表单
        ruleForm: {
          articleId: 0,
          projectId: 0,
          demandId: 0,
          title: '',
          content: '',
          video_en:'',
        },
        rules: {
          title: [
            { required: true, message: '请输入文章标题', trigger: 'blur' },
            { min: 0, max: 20, message: '长度在 20 个字符内', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入文章内容', trigger: 'blur' }
          ]
        },
        centerDialogVisible: false, // 弹框
        editors:'',
        artstatus:'',     //我的写作详情状态值
        projectId:'',
        id:'',
        articleDemandId:'',
        myEditor:null,

      }
    },
    // components: {pagination},
    mounted () {
      // let that = this;
      // that.getList();
      // this.getDictionaries()
      this.getYunToken()
      this.getArticleDemandfront()
      this.getArticleDemandid()
      this.editor()
    
    },
    methods: {
    
      editor(){
                let CKEDITOR = window.CKEDITOR;

                 this.myEditor = CKEDITOR.replace("editor",
                    {height: "400px",
                        width: "700px",
                        toolbar: [['Bold','Italic','Underline','Strike','TextColor','BGColor'],['Format','FontSize'],['JustifyLeft','JustifyCenter','JustifyRight'],['Outdent','Indent'],['NumberedList','BulletedList'],['Blockquote','HorizontalRule'],['RemoveFormat'],['Image','Link'],['Undo','Redo']],
                        language : 'zh-cn',
                        filebrowserImageUploadUrl : 'http://api.welltour.cn/ckFiles?backUrl=http://welltour.cn/ckFiles',
                        image_previewText : '',});
                   // myEditor.setData(this.editors);
            },
      //分页
      // handleSizeChange(val){
      //     this.pages.size=val
      //     this.getArticleDemandfront()
      // },
      // handleCurrentChange(val){
      //     this.pages.no=val
      //     this.getArticleDemandfront()
      // },
      // 
      shuchu:function(){

            this.imageUrl='http://oss.welltour.cn/welltour/static/spsy.png'
            this.authFrontPic=''
          },
           handleAvatarSuccess(res, file) {
                
                this.authFrontPic=res.datas.file
                this.imageUrl = URL.createObjectURL(file.raw);
                console.log(this.authFrontPic)
             },
           beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpg';
            const isJPG2 = file.type === 'image/jpeg';
            const isJPG3 = file.type === 'image/png';
            const isJPG4 = file.type === 'image/bmp';
            const isLt2M = file.size / 1024 / 1024 < 5;
       
  

            if (!isJPG && !isJPG2 && !isJPG3 && !isJPG4) {
                 this.v_html='上传图片只能是jpg、jpeg、png、bmp格式!';
                    setTimeout(() => { 
                                    this.v_html = ''
                                      },2000) 
            }
            if (!isLt2M) {
              this.v_html='上传图片大小不能超过 5MB!';
              setTimeout(() => { 
                                    this.v_html = ''
                                      },2000) 
            }
            return  (isJPG || isJPG2 || isJPG3 || isJPG4) && isLt2M;
          },
      returngo:function(){
          window.history.go(-1);
      },
      returnsuperior:function(){
      	  window.history.go(-1);
      },
      tougao:function(){
                 let that=this
                 // that.getArticleid()
                 // getArticleid
                 that.ruleForm.title=''
                 that.ruleForm.content=''
                 
                 
                  that.dialog.oprTyp=1
                   // setTimeout(function () {
                     if(that.myEditor == null || that.myEditor == 'undefined'){

                           // that.editor();
                         }
                         window.CKEDITOR.instances.editor.setData(that.ruleForm.content); 
                 // that.editor();
                 // myEditor.setDate('')
                  // },100);
                   // window.CKEDITOR.instances.editor.setData();
                    // myEditor.setDate(that.articleDetail.content)
             
      },
      //获得列表
      getArticleDemandfront () {
        let that = this;
        commonService.getArticleDemandfront({pageNo: that.pages.no, pageSize:that.pages.size,query:that.query,type:that.status,dicId:that.dicId}).then(function (res) {
                  if(res.data.code==200){
                       
                          that.tableData=res.data.datas.records
                          that.inde=res.data.datas.total
                  }
                  
        });
      },
      // 获取分类
      // getDictionaries () {
      //   let that = this;
      //   commonService.getDictionaries({type:2}).then(function (res) {
      //             if(res.data.code==200){
      //                     that.options=res.data.datas
      //                     let obj={name:'所有行业',id:''}
      //                     that.options.unshift(obj)
      //             }
                  
      //   });
      // },
        getYunToken () { // 获取阿里云token
          let that = this;
          commonService.getYunToken().then(function (res) {
             //console.log('获取阿里云token', res);
              if(res.data.success){
                  let info = res.data.datas;
                  that.ossOption.accessKeyId = info.accesskeyid;
                  that.ossOption.accessKeySecret = info.accesskeysecret;
                  that.ossOption.stsToken = info.securitytoken;
              }
          });
      },
        getNowFormatDate () { //  给上传的视频重命名为当前时间
          let date = new Date();
          let seperator1 = "-";
          let year = date.getFullYear();
          let month = date.getMonth() + 1;
          let strDate = date.getDate();
          if (month >= 1 && month <= 9) {
            month = "0" + month;
          }
          if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
          }
          let currentdate = year + seperator1 + month + seperator1 + strDate;
          return currentdate;
      },
         // 删除视频
      delVideo_en () {
          let that = this;
          that.fileList_en = [];
          that.ruleForm.video_en = '';
          that.progressBar_en=0;
       // let client = new OSS.Wrapper(that.ossOption);

          // vodsVideoUploadClient.cancel();
         // document.getElementById('uploadVideo').outerHTML = ''// 清空文件选择器;
      },
            // 视频上传
      uploadVideo_en (event) {

        let that = this;
        let e = event || window.event;
        let file = e.target.files[0];
        let fileName = file.name;
        let limit = parseFloat(file.size / 1024 / 1024) ; //  kb=file.size / 1024; mb= file.size / 1024 / 1024;
        let key ='video/'+that.getNowFormatDate()+'/'+ file.name; // 新文件名称
        let  suffix = file.name.substr(file.name.lastIndexOf(".")).toLowerCase(); // 文件后缀名
          // 只可以上传一个视频
        if(that.fileList_en.length >= 1){
            this.$alert('只可以上传一个视频', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                }
            });
            return false;
        }
        // 请上传mp4格式的视频
        if(suffix!='.mp4'){
            this.$alert('请上传MP4格式的视频', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                }
            });
            return false;
        }
        // 视频小于500mb
        if(limit < 500){
            let client = new OSS.Wrapper(that.ossOption);
            // 上传
            // console.log(file)
            that.progressBar_en="1%"
              that.ruleForm.video_en = ''
              let option = {
                    name: fileName,
                    size: Math.floor(limit),
                  }
            that.fileList_en.push(option);
            client.multipartUpload(key, file, {
                // progress: function* (percentage, cpt) {
                      // 上传进度
                    // that.progressBar_en = percentage*100 + '%';
                //    console.log('percentage', percentage);
                //    console.log('cpt', cpt);
                  progress (done) {
                    if(that.progressBar_en ==0){
                        return false
                    }
                     that.progressBar_en = done*100 + '%';
                       return function (done) {
                           done();
                         };
                     },


                // }
            }).then((results) => {
                // 上传完成
                console.log(results)
                //console.log(results,'上传完成');
                that.ruleForm.video_en = "http://well-tour.oss-cn-shanghai.aliyuncs.com/"+key;
                that.fileList_en=[];
                  let option = {
                    name: fileName,
                    size: Math.floor(limit),
                  }
                  
                  that.fileList_en.push(option);
            }).catch((err) => {
               
                console.log("错误：" + err)
            });
          // var obj = document.getElementById("uploadVideo_en") ;
          // obj.outerHTML = obj.outerHTML;
        }else{
           // 不超过500m
            this.$alert('上传视频的大小不能超过500mb', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                }
            });
        }
      },
       // 获取写作需求
       getArticleDemandid:function(){
            let that=this
             // if(list.articleStatus==4){
               // window.open(window.location. origin + '/articles?id='+list.articleId)
               // that.$router.push({path:"/articles",query:{id:list.articleId}})
             // }else{
             	let id = that.$route.query.id
              commonService.getArticleDemandid(id).then(function(res){
            
                    if(res.data.code == 200){
                        that.proObj=res.data.datas
                        console.log(that.proObj)
                        // that.countdown=common.getTimer(that.data.endTime) 
                        // that.totime = new Date().getTime()
                        // that.show=true
                        that.centerDialogVisible=true  
                        that.artstatus=''
                        if(that.proObj.articleStatus != null){
                              that.getArticleid()
                        }else{
                           that.dialog.oprTyp=''
                        }
                        if(that.proObj.status==2 && (that.proObj.articleStatus == 0 || that.proObj.articleStatus == null) && that.dialog.oprTyp==''){
                                that.ruleForm.title=''
                                that.ruleForm.content=''
                              that.dialog.oprTyp=1
                               // setTimeout(function () {
                                // if(that.myEditor == null || that.myEditor == 'undefined'){
                                        // setTimeout(function () {
                                       // that.editor();
                                    //      },100); 
                                    //     return blur
                                    // }

                                  window.CKEDITOR.instances.editor.setData(that.ruleForm.content); 
                        }
                           
                    }
              })
          // }

          },
          // 获取我的写作详情
          getArticleid:function(){
            let that=this

             if(that.proObj.articleId != null){
                   commonService.getArticleid(that.proObj.articleId).then(function(res){
                   // that.pageNo++
                    if(res.data.code == 200){
                        that.articleDetail=res.data.datas
                        that.ruleForm.title=res.data.datas.title
                        that.ruleForm.content=res.data.datas.content
                        that.ruleForm.video_en = res.data.datas.video
                         
                         if(res.data.datas.cover!=''&&res.data.datas.cover!=null){
                             that.imageUrl=that.$store.state.picHead + res.data.datas.cover
                             that.authFrontPic=res.data.datas.cover
                          }
                        that.artstatus=res.data.datas.status
                        that.projectId=res.data.datas.projectId
                        that.articleDemandId=res.data.datas.articleDemandId
                        that.id=res.data.datas.id
                         if(that.artstatus==1||that.artstatus==2||that.artstatus==0||that.artstatus==''||that.artstatus==6){
                              that.dialog.oprTyp=1
                               // setTimeout(function () {
                                // if(that.myEditor == null || that.myEditor == 'undefined'){
                                        // setTimeout(function () {
                                       // that.editor();
                                         // },100); 

                                    // }
                                  window.CKEDITOR.instances.editor.setData(that.ruleForm.content);   
                             // that.editor();
                              // },100); 
                            
                               // myEditor.setDate(that.articleDetail.content)
                         }else{
                             that.dialog.oprTyp=2
                         }
                    }
              })
             }
          },
          //撤回弹出
          open() {
        this.$confirm('是否确定撤回?', '撤回提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // this.$message({
          //   type: 'success',
          //   message: '撤回成功!'
          // });
          this.putArticleRepeal()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
  

          //撤回
          putArticleRepeal:function(){
               let that=this
               let id = that.$route.query.id
        commonService.putArticleRepeal({id:that.proObj.articleId}).then(function(res){
                  console.log(res)
                   if(res.data.code==200){
                   that.$message.success("撤回成功");
                      that.getArticleDemandid()
                   }
              })
                    
          },
           //新增
          postArticle:function(type){
              let that=this
                   let id=that.proObj.id
                   let projectId=that.proObj.projectId
                   that.ruleForm.content=that.myEditor.getData()
                   if(that.ruleForm.title==''){
                      that.$message.error('请填写文章标题');
                      return false
                   }
                     if(that.ruleForm.content==''){
                       that.$message.error('请填写文章内容');
                       return false
                     }
                   if(that.artstatus == 2){
                      type=3
                   }

                  
                if(that.proObj.articleId == null){
                      commonService.postArticle({projectId:projectId,articleDemandId:id,title:that.ruleForm.title,content:that.ruleForm.content,video:that.ruleForm.video_en,type:type,cover:that.authFrontPic}).then(function(res){
                  
                   if(res.data.code==200){
                    that.centerDialogVisible=false
                    that.getArticleDemandfront()
                
                      if(type==2){
                        that.articleId=res.data.datas.id
                        that.postApply()
                       }
                       that.$message.success("修改");
                       window.history.go(-1);
                      
                   }else{
                    that.$message.error(res.data.message);
                   }
              })
                    }else{
         commonService.putArticle({id:that.proObj.articleId,projectId:projectId,articleDemandId:id,title:that.ruleForm.title,content:that.ruleForm.content,video:that.ruleForm.video_en,type:type,cover:that.authFrontPic}).then(function(res){
             
                   if(res.data.code==200){
                   that.centerDialogVisible=false
                    that.getArticleDemandfront()

                      if(type==2){
                        that.articleId=res.data.datas.id
                        that.postApply()
                       }
                       that.$message.success("修改");
                       window.history.go(-1);
                   }else{
                    that.$message.error(res.data.message);
                   }           
              })
             } 
          },
          // 申请写作
          postApply:function(){
            let that=this
            let id=that.proObj.id
             commonService.postApply({articleId:that.articleId,projectId:that.projectId,articleDemandId:id,}).then(function(res){
                                
                 })
          },
  
    },
   
  }
</script>
<style lang="less">
    
    .writing{
    	margin: 20px;
       padding: 20px;
       	background: #fff;
        border: 1px solid #dcdfe6;
        -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
         box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
      .searchIpt {
        width: 250px;
      }
      .z-pic{
                // position: relative;
                width: 375px;
                height: 240px;
                background: rgb(201, 209, 217);
                
                text-align: center;
                position: relative;
                .img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 99;
                    height:240px;
                    width: 100%;
                    overflow: hidden;
                    img{
                        height:240px;
                        width: 100%;

                    }
                }
                .hig{
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 20px;
                    height: 20px;
                    font-size: 20px;
                    text-align: center;
                    line-height: 20px;
                    color:#fff;
                    background: #eb6100;
                }
                // i{
                //     display: inline-block;
                //     font-weight: 100;
                //     margin-top: 20px;
                //     font-size: 50px;
                //     color: white;

                // }
                p{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    color: white;
                    height: 30px;
                    line-height: 30px;
                    font-size: 12px;
                    background: #65686c;
                    text-align: center;
                    width: 100%;
                    z-index: 300;
                   
                    

                }
                .avatar-uploader .v_iimg{
                     width: 100%;
              
                }
                  .avatar-uploader .el-upload {
                    // border: 1px  #d9d9d9;
                    // border-radius: 6px;
                    cursor: pointer;
                    position: relative;
                     width: 100%;
                    height: 240px;
                    overflow: hidden;
                  }
                  .avatar-uploader .el-upload:hover {
                    border-color: #409EFF;

                  }
                  .avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 115px;
                    height: 115px;
                    line-height: 115px;
                    text-align: center;
                  }
                  .avatar {
                    width: 100%;
                    height: 240px;
                    // height: 115px;
                    display: block;
                  }
            }
      .opr{
        margin-bottom: 20px;
      }
      .has-gutter{
        background: #909399;
      }
      .el-table th{
        background: #eee;
      }
      .v_paging{
         margin-top: 20px;
         text-align: right;
      }
  .reqCover{
    .twoLine{
        margin-top: 20px;
        img{ max-width: 100%;
             height: auto !important;}
    }

  }
  .v_retgo{
      // margin-left: 10px;
      cursor: pointer;
      font-size: 16px;
      color: #333;line-height: 30px;
      i{
        margin: 0 6px;
        font-size: 16px;
        color: 16px;
      }
  }

  .xm-item{
    line-height: 1.8;
    font-family: Menlo,Monaco,Consolas,Courier,monospace;
    font-size: 12px;
    padding: 12px 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    border-radius: 4px;
    -webkit-font-smoothing: auto;
    display:flex;justify-content: space-between;align-items: flex-start;
    .p.tit{min-height: 30px;line-height: 30px;font-size: 16px;color: #333;
      display:flex; justify-content: flex-start; align-items: center;
    .line{display:block;height: 14px;border-left:2px solid #f29700;float:left;margin-right: 8px;}
    }
    .p.des{min-height: 25px;font-size: 14px;color:#666;}
    .p.info{font-size: 12px; color:#999;}
    .left{ width: 95%; }
    .right{ width: 5%; display:flex;justify-content: space-around;align-items: flex-start;
    i:hover{color:#409EFF;cursor: pointer;}
    }
  }
  .el-dialog__wrapper{
       background: rgba(0, 0, 0, 0.3) !important;
       .el-dialog{
           width: 640px;
           max-height: 80%;
           overflow-y:auto; 
           margin: 0 auto;
       }
    }

    .v-des{line-height:24px;margin-top:14px;font-size:12px;color:#999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}
    .v_video{width: 300px;}
    .video-list{width:600px;
       .v-des{color:#333;display:flex;justify-content: flex-start; align-items: center;}
       .el-icon-circle-check{margin-left:10px;cursor:pointer;color:#67c23a;display:block;}
       .el-icon-close{margin-left:10px;cursor:pointer; display:none;}
       .v-des:hover{background:#eee;}
       .v-des:hover .el-icon-circle-check{display:none;}
       .v-des:hover .el-icon-close{display:block;}
    }
    // .v_boxbox{
    //    border:1px solid #ccc;
    //    width: 300px;
    //    padding: 10px;
    //    border-radius: 4px;
    // }
    .v-upload-btn{margin-top: 30px;width:80px;position:relative;
      .file{width:80px;height:28px;position:absolute;top:0; left:0;cursor: pointer;opacity:0;}
    }
    .barProg{width: 300px;height:2px;}
    .progress{height:2px;background:#409EFF;
      -webkit-border-radius:1px;
      -moz-border-radius:1px;
      border-radius:1px;}
    .thumb{width:150px;height:100px;}
      
    }
  .price{width: 100%;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}
</style>